<template>
  <div class="about-container">
    <div class="top">
      <div class="avatar-box">
        <van-image class="avatar" round :src="userInfo.avatar" @click="openFile" />
      </div>
    </div>
    <van-cell-group inset class="group">
      <van-cell title="ID" :value="userInfo.id" />
      <van-cell title="姓名" :value="userInfo.name" />
      <van-cell title="用户名" :value="userInfo.username" />
      <van-cell title="邮箱" :value="userInfo.email" />
      <van-cell title="电话" :value="userInfo.phone"> </van-cell>
      <van-cell title="生日" :value="parseTime(userInfo.birthday, '{y}-{m}-{d}')" is-link clickable  @click="showDatePicker=true"/>
      <van-cell title="修改密码" is-link clickable @click="show = true" />
      <van-cell title="退出登录" is-link clickable @click="comfirmLogout" />
    </van-cell-group>
    <van-popup v-model="show" @closed="resetForm">
      <van-form @submit="onSubmit" class="password-form" ref="password-form">
        <van-field
          v-model="form.oldPwd"
          type="password"
          name="oldPwd"
          label="原密码"
          :rules="[{ required: true, message: '请填写原密码' }]"
        />
        <van-field
          v-model="form.newPwd"
          type="password"
          name="newPwd"
          label="新密码"
          :rules="[{ validator: checkPwd, message: '新密码必须大于6位' }]"
        />
        <van-field
          v-model="form.newPwdRep"
          type="password"
          name="newPwdRep"
          label="重复密码"
          :rules="[{ validator: checkRepeatPwd, message: '两次密码不一致' }]"
        />
        <div class="button-group">
          <van-button class="btn" @click="show = false">取消</van-button>
          <van-button class="btn" type="primary" native-type="submit">确定</van-button>
        </div>
      </van-form>
    </van-popup>
    <van-popup v-model="showDatePicker" position="bottom" :style="{ height: '40%' }" >
      <van-datetime-picker
        v-model="date.currentDate"
        type="date"
        title="选择年月日"
        :min-date="date.minDate"
        :max-date="date.maxDate"
        @cancel="cancelDatePicker"
        @confirm="updateBirthday"
      />
    </van-popup>
    <h5-cropper class="cropper" :option="cropperOption" @getFile="getFile" ref="cropper" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { parseTime } from '@/utils/'
import H5Cropper from 'vue-cropper-h5'
import { updatePassword } from '@/api/user'
export default {
  name: 'AboutMe',
  components: { H5Cropper },
  data() {
    return {
      show: false,
      form: {
        oldPwd: '',
        newPwd: '',
        newPwdRep: ''
      },
      cropperOption: {
        ceilbutton: true, // 操作按钮是否在顶部
        canMoveBox: true, // 截图框能否拖动
        fixedBox: false, // 固定截图框大小 不允许改变
        centerBox: true, // 截图框是否被限制在图片里面
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1]
      },
      date: {
        currentDate: new Date(),
        minDate: new Date(1900, 0, 1),
        maxDate: new Date()
      },
      showDatePicker: false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.setBirthdayDate()
  },
  methods: {
    ...mapActions({
      setAvatar: 'user/setAvatar',
      updateUserInfo: 'user/updateUserInfo'
    }),
    comfirmLogout() {
      this.$dialog
        .confirm({
          title: '你确定要退出吗？'
        })
        .then(() => {
          this.$store.dispatch('user/logout').then(() => {
            this.$socket.close()
            location.reload()
          })
        })
        .catch(e => {})
    },
    resetForm() {
      this.$refs['password-form'].resetValidation(['newPwd', 'oldPwd', 'newPwdRep'])
      this.form.oldPwd = ''
      this.form.newPwd = ''
      this.form.newPwdRep = ''
    },
    async onSubmit({ oldPwd, newPwd, newPwdRep }) {
      const { code } = await updatePassword({ oldPwd, newPwd, newPwdRep })
      if (code === 0) {
        this.show = false
      }
    },
    checkRepeatPwd(val) {
      return this.form.newPwd === this.form.newPwdRep
    },
    checkPwd(val) {
      return val.length >= 6
    },
    parseTime,
    async getFile(file) {
      await this.setAvatar({ file })
    },
    openFile() {
      this.$refs.cropper.$el.firstElementChild.click()
    },
    setBirthdayDate() {
      if (this.userInfo.birthday) {
        this.date.currentDate = new Date(this.userInfo.birthday)
      }
    },
    cancelDatePicker() {
      this.showDatePicker = false
      this.setBirthdayDate()
    },
    async updateBirthday(e) {
      const { code } = await this.updateUserInfo({ birthday: e })
      if (code === 0) {
        this.cancelDatePicker()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.about-container {
  background: $bg-color;
  padding: $nav-bar-height 0 $tab-bar-height;
  box-sizing: border-box;
  // min-height: calc(calc(var(--vh) * 100) - #{$nav-bar-height + $tab-bar-height});
  min-height: calc(var(--vh) * 100);
  .top {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
    background: url('../assets/img/profile_bg.jpg') center / cover no-repeat;
    .avatar-box {
      width: 150px;
      height: 150px;
    }
    .avatar {
      width: 100%;
      height: 100%;
      border: 8px solid rgba($color: #000000, $alpha: 0.4);
    }
  }
  .group {
    margin-top: $padding-side * 2;
    .van-cell__value {
      flex: 3;
    }
  }
  .van-popup {
    border-radius: 8px;
  }
  .password-form {
    width: 325px;
    .button-group {
      margin-top: 10px;
      display: flex;
      .btn {
        flex: 1;
      }
    }
  }
  .cropper {
    width: 0;
    height: 0;
  }
}
</style>
